<template>
	<view class="monitor-main">
		<view class="tabs-list">
			<view class="tabs-box">
				<view class="tabs-item" v-for="(item,index) in tabsType" :key="item.name" @click="clickTab(item,index)"
					:class="{'active-tab':activeIndex==index,'active-right':activeIndex==index+1,'active-left':activeIndex==index-1}">
					{{item.name}}
				</view>
			</view>
			<view class="tab-content" v-show="activeIndex==0">
				<view class="content-title">
					血压检测测试数据 <span class="content-time">{{datas.length>0?datas[0].bloodPressureTime:""}}</span>
				</view>
				<view class="data-charts">
					<l-echart v-if="activeIndex==0" style="width: 65%;height: 30vh;" ref="chart"
						@finished="init"></l-echart>
					<view class="num-data">
						<view class="datas">
							<view class="datas-title"><span class="min-title"></span>最低值</view>
							<span v-if="datas.length>0">{{datas[0].bloodPressureMin}}</span>
						</view>
						<view class="datas">
							<view class="datas-title"><span class="max-title"></span>最高值</view>
							<span v-if="datas.length>0">{{datas[0].bloodPressureMax}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-content" v-show="activeIndex==1">
				<view class="content-title">
					血糖 <span class="content-time">{{datas.length>0?datas[0].bloodGlucoseTime:""}}</span>
				</view>
				<view class="data-charts">
					<l-echart v-if="activeIndex==1" style="width: 100%;height: 30vh;" ref="chart1"
						@finished="init1"></l-echart>
				</view>
			</view>
			<view class="tab-content" v-show="activeIndex==2">
				<view class="content-title">
					体重检测测试数据 <span class="content-time">{{datas.length>0?datas[0].weightTime:""}}</span>
				</view>
				<view class="data-charts">
					<l-echart v-if="activeIndex==2" style="width: 100%;height: 30vh;" ref="chart2"
						@finished="init2"></l-echart>
				</view>
				<view class="weight-to">
					<button class="weight-bth">
						<image style="width: 48rpx;height: 48rpx;" src="@/static/icon/pang.png" mode="scaleToFill"></image>
						<span>上秤测量</span>
					</button>
				</view>
				<view class="weight-data">
					<view class="data-s">
						<span class="data-1">{{datas.length>0?datas[0].moisture:'—'}}</span>
						<span class="data-2">kg</span>
						<span class="data-3">水分</span>
					</view>
					<view class="data-s">
						<span class="data-1">{{datas.length>0?datas[0].obesityClass:'—'}}</span>
						<span class="data-2">kg</span>
						<span class="data-3">肥胖等级</span>
					</view>
					<view class="data-s">
						<span class="data-1">{{datas.length>0?datas[0].fatBurningMotion:'—'}}</span>
						<span class="data-2">kg</span>
						<span class="data-3">内脏脂肪数</span>
					</view>
				</view>
			</view>
			<view class="tab-content" v-show="activeIndex==3">
				<view class="content-title">
					尿酸 <span class="content-time">{{datas.length>0?datas[0].trioxypurineTime:''}}</span>
				</view>
				<view class="data-charts">
					<l-echart v-if="activeIndex==3" style="width: 100%;height: 30vh;" ref="chart3"
						@finished="init3"></l-echart>
				</view>
			</view>
		</view>
		<view class="table-s" v-if="activeIndex!=2">
			<span class="activeName-title">历史记录</span>
			<uni-table border stripe emptyText="暂无更多数据" style="margin-top: 30rpx;">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="280rpx">测量时间</uni-th>
					<uni-th align="center"  width="180rpx">数值</uni-th>
					<uni-th align="center" width="180rpx">评估</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in datas" :key="index">
					<uni-td align="center" v-if="activeIndex==0">{{item.bloodPressureTime}}</uni-td>
					<uni-td align="center" v-if="activeIndex==0">{{item.bloodPressureMin}}</uni-td>
					<uni-td align="center" v-if="activeIndex==1">{{item.bloodGlucoseTime}}</uni-td>
					<uni-td align="center" v-if="activeIndex==1">{{item.bloodGlucoseValue}}</uni-td>
					<uni-td align="center" v-if="activeIndex==3">{{item.trioxypurineTime}}</uni-td>
					<uni-td align="center" v-if="activeIndex==3">{{item.trioxypurineValue}}</uni-td>
					<uni-td align="center" style="color: #0ADD9E;" v-if="activeIndex==0">{{item.bloodPressureAssess}}</uni-td>
					<uni-td align="center" style="color: #0ADD9E;" v-if="activeIndex==1">{{item.bloodGlucoseAssess}}</uni-td>
					<uni-td align="center" style="color: #0ADD9E;" v-if="activeIndex==3">{{item.trioxypurineAssess}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="weight-png" v-if="activeIndex==2">
			<image src="@/static/weight-png.png" mode="widthFix"></image>
		</view>
		<tabbar :routePath="'/pages/monitor/monitor'" :typeBar="1" />
	</view>
</template>

<script>
	import {
		findHealthMonitor
	} from "@/common/api/index.js"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				activeIndex: 0,
				activeType:{
					name: '血压',
					echart:"init"
				},
				tabsType: [{
						name: '血压',
						echart:"init"
					},
					{
						name: '血糖',
						echart:"init1"
					},
					{
						name: '体重',
						echart:"init2"
					},
					{
						name: '尿酸',
						echart:"init3"
					},
				],
				datas:[]
			}
		},
		mounted() {
            this.getData()
		},
		methods: {
			clickTab(item,index){
				this.activeIndex = index
				this.activeType = item
				this.getData()
			},
			async getData(){
				let res = await findHealthMonitor({type:this.activeType.name})
				console.log(res)
				this.datas = res.data
				this[this.activeType.echart](res.data)
			},
			//获取echarts
			async init(data = []) {
				let value = 0
				if(data.length>0){
				   value = data[0].bloodPressureMax
				}
				const chart = await this.$refs.chart.init(echarts);
				const colorStyle = [[1,new echarts.graphic.LinearGradient(
				                  0, 0, 1, 0, [
				                  {
				                     offset: 0,
				                     color: 'rgba(90, 212, 172, 0.8)',
				                  },
				                  {
				                     offset: 1,
				                     color:'rgba(243, 138, 115, 0.8)',
				                  }
				                  ]
				            )]]
				let option = {
					series: [
						//最外的圆圈（外层刻度）
						{
							type: 'gauge',
							center: [
								'50%',
								'55%'
							],
							radius: '100%',
							startAngle: 220,
							endAngle: -40,
							min: 0,
							max: 250,
							axisLine: {
								show: true,
								lineStyle: {
									width: 3,
									color: colorStyle
								}
							},
							axisLabel: {
								show: 0
							},
							axisTick: {
								lineStyle: {
									color: colorStyle,
									width: 1
								},
								length: 5
							},
							splitLine: {
								length: 8,
								lineStyle: {
									color: '#0ADD9E',
									width: 3
								}
							},
						},
						// 外围刻度（第二层）
						{
							type: 'gauge',
							center: [
								'50%',
								'55%'
							],
							radius: '82%', // 1行3个
							min: 0,
							max: 250,
							startAngle: 220,
							endAngle: -40,
							axisLine: { // 坐标轴线
								lineStyle: { // 属性lineStyle控制线条样式
									color: colorStyle,
									fontSize: 12,
									width: 2,
									opacity: 1, //刻度背景宽度
								}
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
						},
						// 外围刻度（中间有背景颜色那块，包括里面的刻度）
						{
							type: 'gauge',
							center: [
								'50%',
								'55%'
							],
							radius: '80%', // 1行3个
							splitNumber: 10,
							min: 0,
							max: 250,
							startAngle: 220,
							endAngle: -40,
							//分隔线样式
							axisTick: {
								lineStyle: {
									color: colorStyle,
									width: 1
								},
								length: 5
							},
							//刻度样式
							axisLine: {
								show: true,
								lineStyle: {
									width: 50,
									color: colorStyle
								}
							},
							//整数分隔线
							splitLine: {
								show: true,
								length: 7,
								lineStyle: {
									color: colorStyle,
									width: 2
								}
							},
							//刻度数字
							axisLabel: {
								show: true,
								distance: -10,
								textStyle: {
									color: 'rgba(0, 0, 0, 0.5)',
									fontSize: '8',
									fontWeight: 'bold'
								}
							},
						},
						//从外数第三条线
						{
							type: 'gauge',
							center: [
								'50%',
								'55%'
							],
							radius: '55%', // 1行3个
							splitNumber: 10,
							min: 0,
							max: 250,
							startAngle: 220,
							endAngle: -40,
							axisLine: { // 坐标轴线
								lineStyle: { // 属性lineStyle控制线条样式
									color: colorStyle,
									fontSize: 11,
									width: 2,
									opacity: 1, //刻度背景宽度
								}
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							pointer: {
								show: false
							},
							axisTick: {
								show: false
							},
							detail: {
								show: 0
							}
						},
						// 内侧指针、数值显示
						{
							name: '',
							center: [
								'50%',
								'55%'
							],
							type: 'gauge',
							radius: '74%', // 1行3个
							splitNumber: 10,
							min: 0,
							max: 250,
							startAngle: 220,
							endAngle: -40,
							axisLine: {
								show: true,
								lineStyle: {
									width: 5,
									color: [
										[
											1,
											new echarts.graphic.LinearGradient(
												0, 0, 1, 0, [{
														offset: 0,
														color: 'rgba(0, 199, 187, 0)',
													},
													{
														offset: 1,
														color: 'rgba(0, 199, 187, 0)',
													}
												]
											)
										],
									]
								}
							},
							axisTick: {
								show: 0,
							},
							splitLine: {
								show: 0,
							},
							axisLabel: {
								show: 0
							},
							pointer: {
								show: true,
								length: '90%',
								width: 3,
								itemStyle: {
									color: "#717171"
								}
							},
							data: [{
								value: value,
								name: 'mmHg',
								title: {
									offsetCenter: ['0%', '60%'],
									fontSize: 11,
									color: '#717171'
								},
								detail: {
									offsetCenter: ['0%', '40%'],
									valueAnimation: true,
									fontSize: 13 ,
									color: '#FF3A3B'
								}
							}]
						}
					]
				};
				chart.setOption(option)
			},
			//获取echarts
			async init1(data = []) {
				let dataX = ['空腹', '早餐前','早餐后', '午餐前', '午餐后','晚餐前','晚餐后','睡前']
				let dataY = data.map(v=>v.bloodGlucoseTimeDesc)
				// console.log(dataY)
				const chart = await this.$refs.chart1.init(echarts);
				let option = {
					// dataZoom: [{
					// 	type: 'inside', //1平移 缩放
					// 	throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
					// 	minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
					// 	start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
					// 	end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
					// 	zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
					// }],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataX,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'solid'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 10,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'solid'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(107, 54, 130, 0.2)"
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						}
					},
					series: [{
						data: dataY,
						type: 'line',
						showSymbol: false,
						smooth: true, //平滑曲线显示
						lineStyle: {
							width: 3,
							color: 'rgba(20, 214, 180, 1)',
							shadowColor: 'rgba(26,117,218,0.17)', //设置折线阴影
							shadowBlur: 5,
							shadowOffsetY: 9,
						},
						itemStyle: {
							normal: {
								color: 'rgba(20, 214, 180, 1)',
								borderColor: 'rgba(20, 214, 180, 1)',
							},
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(20, 214, 180, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(20, 214, 180, 0)' // 100% 处的颜色
							}], false),
						},
					}],
				};
				chart.setOption(option)
			},
			//获取echarts
			async init2(data = []) {
				var value = 0;
				if(data.length>0){
					value = data[0].weightData
				}
				const chart = await this.$refs.chart2.init(echarts);
				
				let option = {
					backgroundColor: '',
					series: [
						// 是否正常
						{
							type: 'gauge',
							radius: '50%',
							pointer: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							detail: {
								fontSize: 22,
								color: '#FF3A3B',
								offsetCenter: ['0', '-30%'],
								formatter: (value) => {
									return value;
								},
							},
							data: [{
								value: value,
							}, ],
						},
						// 主图
						{
							type: 'gauge',
							startAngle: 200,
							endAngle: -20,
							min: 22,
							max: 226,
							splitNumber: 12,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: 'rgba(10, 221, 158, 0.5)',
										},
										{
											offset: 0.5,
											color: 'rgba(10, 221, 158, 1)',
										},
										{
											offset: 1,
											color: 'rgba(239, 72, 76, 1)',
										},
									]),
								},
							},
							progress: {
								show: true,
								roundCap: true,
								width: 18,
							},
							pointer: {
								show: false,
							},
							axisLine: {
								roundCap: true,
								lineStyle: {
									width: 18,
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							title: {
								show: false,
							},
							detail: {
								fontSize: 11,
								color: '#717171',
								offsetCenter: ['0', '2%'],
								formatter: (value) => {
									return "kg";
								},
							},
							data: [{
								value: value,
							}, ],
						},
						// 总回款比例
						{
							type: 'gauge',
							pointer: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							detail: {
								fontSize: 11,
								color: '#717171',
								offsetCenter: ['0', '50%'],
								formatter: (value) => {
									return "22                            226";
								},
							},
							data: [{
								value: value,
							}],
						},
					],
				}
				chart.setOption(option)
			},
			//获取echarts
			async init3(data = []) {
				const chart = await this.$refs.chart3.init(echarts);
				let dataX = ['空腹', '早餐前','早餐后', '午餐前', '午餐后','晚餐前','晚餐后','睡前']
				let dataY = data.map(v=>v.trioxypurineTimeDesc)
				let option = {
					// dataZoom: [{
					// 	type: 'inside', //1平移 缩放
					// 	throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
					// 	minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
					// 	start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
					// 	end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
					// 	zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
					// }],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataX,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'solid'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 10,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'solid'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(107, 54, 130, 0.2)"
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						}
					},
					series: [{
						data: dataY,
						type: 'line',
						showSymbol: false,
						smooth: true, //平滑曲线显示
						lineStyle: {
							width: 3,
							color: 'rgba(20, 214, 180, 1)',
							shadowColor: 'rgba(26,117,218,0.17)', //设置折线阴影
							shadowBlur: 5,
							shadowOffsetY: 9,
						},
						itemStyle: {
							normal: {
								color: 'rgba(20, 214, 180, 1)',
								borderColor: 'rgba(20, 214, 180, 1)',
							},
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(20, 214, 180, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(20, 214, 180, 0)' // 100% 处的颜色
							}], false),
						},
					}],
				};
				chart.setOption(option)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.monitor-main {
		padding: 0 30rpx;
		padding-bottom: 180rpx;
	}
     .table-s{
		 width: 100%;
		 padding-top: 30rpx;
	 }
	 .weight-png{
		 width: 100%;
		 background-color: #fff;
		 box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
		 margin: 30rpx 0;
		 border-radius: 20rpx;
		 image{
			 width: 100%;
			 
		 }
	 }
	.tabs-list {
		box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		.tab-content {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
            .weight-to{
				width: 260rpx;
				height: 88rpx;
				margin: 0 auto;
				margin-top: -40rpx;
				.weight-bth{
					background-color: #40D49F;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}
			.weight-data{
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;
				padding: 0 30rpx;
				.data-s{
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					align-items: c;
					.data-1{
						font-size: 42rpx;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}
					.data-2{
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}
					.data-3{
						font-size: 26rpx;
						font-weight: 400;
						color: #545B60;
					}
				}
				
			}
			.content-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 32rpx;

				.content-time {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 0.7);
					line-height: 24rpx;
					margin-left: 20rpx;
				}
			}

			.data-charts {
				width: 100%;
				margin-top: 40rpx;
				display: flex;
				align-items: flex-end;
                gap: 60rpx;
				.num-data {
					flex: 1;
					display: flex;
					flex-direction: column;
					text-align: right;
					justify-content: center;
					.datas{
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						text-align: left;
						margin-bottom: 60rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #DADADA;
						.datas-title{
							display: flex;
							gap: 10rpx;
							align-items: center;
							.min-title{
								display: inline-block;
								background-color: #0ADD9E;
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
							}
							.max-title{
								display: inline-block;
								background-color: #EF484C;
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
							}
						}
						
					}
				}
			}
		}

		.tabs-box {
			width: 100%;
			display: flex;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background: linear-gradient(#EBEFF7 50%, #fff 100%);
			overflow: hidden;

			.tabs-item {
				flex: 1;
				text-align: center;
				background-color: #EBEFF7;
				padding: 30rpx 0;
				text-align: center;
				font-weight: 500;
				color: #080808;
			}

			.active-tab {
				background-color: #fff;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;
			}

			.active-tab::after {
				content: "";
				width: 40rpx;
				height: 8rpx;
				background: #40D49F;
				box-shadow: 0rpx 0rpx 6rpx 0rpx #40D49F;
				border-radius: 4rpx;
				position: absolute;
				bottom: 0;
				left: calc(50% - 20rpx);
			}

			.active-right {
				border-radius: 0rpx 0rpx 20rpx 0rpx;
			}

			.active-left {
				border-radius: 0rpx 0rpx 0rpx 20rpx;
			}
		}
	}
</style>